<template>
  <div class="app-container">
    <div class="dashboard">
      <panel-group :value="panelGroup" @handleSetLineChartData="handleSetLineChartData"></panel-group>

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
            <span>工单类型</span>
            </div>
            <div class="chart-wrapper">
              <work-order-pie-chart v-if="flag" :workorderStatusChart="workorderStatusChart"/>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class=""></i>
              <span>SQL执行状态</span>
            </div>
            <div class="chart-wrapper">
              <pie-chart v-if="flag" :sqlStatusChart="sqlStatusChart" />
            </div>
          </el-card>

        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>SQL执行统计</span>
            </div>
            <div class="chart-wrapper">
              <bar-chart v-if="flag" :sqlTypeChart="sqlTypeData"/>
            </div>
          </el-card>

        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class=""></i>
              <span>近期工单</span>
            </div>
            <transaction-table/>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  import PieChart from './components/PieChart'
  import WorkOrderPieChart from './components/WorkorderPieChart'
  import BarChart from './components/BarChart'
  import TransactionTable from './components/TransactionTable'
  import { getDashboardInfo } from '@/api/dashboard'

  export default {
    name: 'dashboard',
    components: {
      PanelGroup,
      WorkOrderPieChart,
      PieChart,
      BarChart,
      TransactionTable
    },
    created() {
      this.fetchData()
    },
    data() {
      return {
        flag: false,
        panelGroup: {},
        sqlTypeData: [],
        sqlStatusChart: [],
        workorderStatusChart: []
      }
    },
    methods: {
      handleSetLineChartData() {},
      fetchData() {
        getDashboardInfo().then(
          res => {
            this.panelGroup = res.data.count_data
            this.sqlTypeData = res.data.sql_type_data
            this.sqlStatusChart = res.data.sql_status_data
            this.workorderStatusChart = res.data.workorder_status_data
            this.flag = true
          }).catch(() => {
          this.$message.error('获取dashboard统计信息失败')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard {

      padding: 32px;
      background-color: rgb(240, 242, 245);
      .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        /*margin-bottom: 32px;*/
      }
    .box-card {
      margin-bottom: 32px;
    }
  }
</style>
